<template>
  <div
    ref="legendTable"
    class="v-property-legend g-relative"
  >
    <div class="_table-body">
      <div class="g-relative g-pd-l-10">
        <div class="g-flex _table-row g-ov-hidden _table-title">
          <div
            v-for="col in model.columns"
            :key="col.prop"
            class="g-flex-1 _cell _value-column"
            :style="{ width: col.width + 'px' }"
          >
            <span class="g-m-l-8">{{ $t(col.label) }}</span>
          </div>
        </div>
        <!-- 列表展示 -->
        <div v-if="legendData && legendData.length > 0">
          <div
            v-for="(row, index) of legendData"
            :key="index"
            class="g-flex _table-row g-ov-hidden"
            :class="{ '_current-row': row.instanceId === curRowId }"
            @click="handleClickRow(row)"
          >
            <div
              v-show="row.instanceId === curRowId"
              class="_table-body-icon"
            >
              <img
                src="statics/icons/app/arrowchoose.svg"
                class="g-m-r-4"
              />
            </div>
            <div
              v-for="col in model.columns"
              :key="col.prop"
              class="g-flex-1 _cell _value-column"
              :class="{ '_current-cell': row.instanceId === curRowId && row[col.prop].key === currentKey }"
              :style="{ width: col.width + 'px' }"
              @click="handleClickItem(row[col.prop].key)"
            >
              <component
                :is="propertyManager.getEditorByPropertyRow(row[col.prop])"
                :key="row[col.prop].key"
                :class="{ _disabled: row[col.prop].readonly }"
                :row="row[col.prop]"
                :selected="row.instanceId === curRowId && row[col.prop].key === currentKey"
                :isShowTerm="row[col.prop].key === PropertyKey.NamedElement_name ? true : false"
              />
            </div>
          </div>
        </div>
        <div v-if="!legendData || legendData.length == 0">
          <NoData></NoData>
        </div>
        <span
          class="_movebar _vertical g-block"
          :style="{ left: nameColumnWidth + 12 + 'px' }"
          @mousedown="handleMouseDownVertical"
        ></span>
      </div>
    </div>
    <div class="g-footer-button g-pd-l-10">
      <MButton
        type="add"
        text="新建"
        :loading="model.addLoading"
        :disabled="isModelDisabled"
        @click="model.handleAdd()"
      />
      <MButton
        type="use"
        text="复制"
        :loading="model.copyLoading"
        :disabled="!legendData || legendData.length === 0 || !model.currentRow || isModelDisabled"
        @click="model.handleCopy()"
      />
      <MButton
        type="disuse"
        text="删除"
        :loading="model.deleteLoading"
        :disabled="!legendData || legendData.length === 0 || !model.currentRow || isModelDisabled"
        @click="model.handleDelete()"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { inject, ref, Ref } from "vue";
import { LegendItem } from "./types";

import { propertyManager } from "./PropertyManager";
import NoData from "./noData.vue";
import MButton from "@/common/button/Button.vue";
import { PropertyKey } from "@/constants/Enums";

defineProps<{
  legendData: LegendItem[];
  modelId?: string;
}>();

const model = app.activeProject!.attributeTabsModel.legendPaneModel;
const curRowId = ref<string | undefined>();
const currentKey = ref<string | undefined>();

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const nameColumnWidth = ref<number>(110);
let mouseStartX = 0;
let originWidth = 0;
const minWidth = 20;

function handleClickRow(row: LegendItem) {
  console.log("property---", row);
  curRowId.value = row.instanceId;
  model.currentRow = row;
}
function handleClickItem(key: string) {
  currentKey.value = key;
}
function handleMouseDownVertical(event: any) {
  mouseStartX = event.clientX;
  originWidth = nameColumnWidth.value;
  window.addEventListener("mousemove", handleMouseMoveVertical);
  window.addEventListener("mouseup", handleMouseUpVertical);
}

function handleMouseMoveVertical(event: any) {
  const maxWidth = app.global.isIpcWindow ? 300 : app.global.siderWidth - 40;
  const mouseEndX = event.clientX;
  let changeWidth = mouseEndX - mouseStartX;
  let width = originWidth + changeWidth;
  if (width > maxWidth) {
    width = maxWidth;
  } else if (width < minWidth) {
    width = minWidth;
  }
  nameColumnWidth.value = width;
}

function handleMouseUpVertical() {
  window.removeEventListener("mousemove", handleMouseMoveVertical);
  window.removeEventListener("mouseup", handleMouseUpVertical);
}
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-property-legend {
  height: 100%;
  overflow: hidden;

  display: flex;
  ._table-body-icon {
    position: absolute;
    left: 1px;
    margin-top: 4px;
  }
  flex-direction: column;
  ._table-title {
    background: $titlebar-bg-color;
  }
  ._table-body {
    flex: 1;
    overflow: auto;
    margin-bottom: 33px;
  }
  ._active-row {
    background-color: $nth-of-type-bg-color !important;
  }
  ._editor-height {
    min-height: 48px;
    width: 30px;
    border-left: 1px solid rgb(221, 221, 221);
  }
  ._string-editor {
    min-height: 72px;
  }
  ._instance-bg {
    background-color: white;
  }

  ._cell {
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 26px;
  }
  ._slot-parent {
    background: #ecf0f7;
  }
  ._constrain_no-data {
    height: 350px;
    border: 1px solid red;
  }
  ._value-column {
    padding: 1px;
    line-height: 26px;
    position: relative;

    &:last-child {
      border-right: 1px solid #ddd;
    }

    ._slot-values {
      display: inline-flex;
      margin-right: 40px;
    }
    ._slot-add {
      display: inline-flex;
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 100%;
      ._add-img {
        position: absolute;
        right: 8px;
        top: 6px;
      }
    }
  }
  ._current-row {
    ._current-cell {
      box-shadow: inset 0px 0px 0px 1px $theme-color;
    }
  }
  ._icons {
    width: 30px;
    border: 1px solid red;
  }
  ._table-row:last-of-type {
    ._cell {
      border-bottom: 1px solid #ddd;
    }
  }

  .el-input__inner {
    border: none;
    box-sizing: border-box;
    height: 24px;
    line-height: 24px;
    background: none;
    box-shadow: none;
    text-align: left;
  }
  .el-textarea__inner:focus {
    background: none;
    box-shadow: none;
  }
  .el-textarea__inner {
    background: none;
    box-shadow: none;
    padding: 5px 8px;
    border: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-input-border {
    border: none;
  }
  ._disabled {
    // color: #979797;
    cursor: not-allowed;
  }

  ._movebar {
    position: absolute;
    &._vertical {
      cursor: col-resize;
      width: 8px;
      height: 100%;
      top: 0;
    }
  }
}
</style>
